{% extends 'cms/base.html' %}
{% block title %}
    后台用户管理
{% endblock %}
{% block head %}
    <script src="{{ url_for('static', filename='cms/js/buser.js') }}"></script>
{% endblock %}
{% block page_title %}
    后台用户管理
{% endblock %}
{% block main_content %}
    <div class="top-box">
        <button class="btn btn-warning" id="buser-add-btn" data-toggle="modal" data-target="#buser_add_modal">添加CMS用户
        </button>
    </div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>用户ID</th>
            <th>用户名</th>
            <th>邮  箱</th>
            <th>角  色</th>
            <th>操  作</th>
        </tr>
        </thead>
        <tbody>
        {% for user in users %}
            <tr>
                <td>{{ user.id }}</td>
                <td>{{ user.username }}</td>
                <td>{{ user.email }}</td>
                <td>{{ user.role }}</td>
                <td>
                    <button user_id="{{ user.id }}" class="btn btn-danger buser-del-btn">删除</button>
                    <button user_id="{{ user.id }}" class="btn btn-warning buser-mod-btn" data-toggle="modal" data-target="#buser_mod_modal">修改角色</button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>


    <!-- Modal -->
    <style>
    .modal-backdrop {
        z-index: -99;
    }
    </style>
    <div class="modal fade" id="buser_add_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加CMS用户</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label for="" class="control-label col-sm-2">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="" class="control-label col-sm-2">邮箱</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="email">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="" class="control-label col-sm-2">角色</label>
                            <div class="col-sm-10">
                                <select name="role" id="">
                                    {% for role in cms_roles %}
                                    <option value="{{ role.id }}">{{ role.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="" class="control-label col-sm-2">密码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="password">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save">添加</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="buser_mod_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改角色</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label for="" class="control-label col-sm-2">角色</label>
                            <div class="col-sm-10">
                                <select name="change-role" id="">
                                    {% for role in cms_roles %}
                                    <option value="{{ role.id }}">{{ role.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save-change">确定修改</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}